<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PreviewImage</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <style>
        body{
          width: 375px;
          max-width: 375px;
          text-align: center;
        }
        .imgs-box img {
          width: 50%;
          margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <h3>Click this images to preview</h3>
    <div class="imgs-box" id="img_box">
        <img src="image/1.jpg" alt="">
        <img src="image/2.jpg" alt="">
        <img src="image/3.jpg" alt="">
    </div>
</body>
<script src="dist/md5.js"></script>
<!-- <script src="src/previewImage.js"></script> -->
<script src="dist/previewImage.min.js"></script>
<script>
    var $ = {};
    /**
     * get multiple elements
     * @public
     */
    $.all = function(selector, contextElement) {
      var nodeList,
        list = [];
      if (contextElement) {
        nodeList = contextElement.querySelectorAll(selector);
      } else {
        nodeList = document.querySelectorAll(selector);
      }
      if (nodeList && nodeList.length > 0) {
        list = Array.prototype.slice.call(nodeList);
      }
      return list;
    }

    /**
     * delegate an event to a parent element
     * @public
     * @param  array     $el        parent element
     * @param  string    eventType  name of the event
     * @param  string    selector   target's selector
     * @param  function  fn
     */
    $.delegate = function($el, eventType, selector, fn) {
      if (!$el) { return; }
      $el.addEventListener(eventType, function(e) {
        var targets = $.all(selector, $el);
        if (!targets) {
          return;
        }
        // findTarget:
        for (var i=0; i<targets.length; i++) {
          var $node = e.target;
          while ($node) {
            if ($node == targets[i]) {
              fn.call($node, e);
              break; //findTarget;
            }
            $node = $node.parentNode;
            if ($node == $el) {
              break;
            }
          }
        }
      }, false);
    };

    var urls = [];
    var imgs = $.all('img',$.all('#img_box')[0]);
    imgs.forEach(function(v,i){
        urls.push(v.src);
    })
    
    $.delegate(document.querySelector('#img_box'), 'click','img',function(){
        var current = this.src;
        var obj = {
            urls : urls,
            current : current
        };
        previewImage.start(obj);
    });
    
</script>
</html>
